<template>
  <div>
    <!-- 页面上层数据 -->
    <div class="shang">
      <div class="shang_box">
        <div class="zi">角色管理</div>
        <el-button class="btns" icon="el-icon-refresh" @click="Router"
          >刷新</el-button
        >
      </div>
    </div>
    <!-- 数据列表 -->
    <div class="box">
      <div slot="header" class="clearfix">
        <span class="shujuliebiao">
          <i class="el-icon-s-operation"></i>数据列表
        </span>
        <span>
          <el-button
            style="padding: 8px 15px"
            type="button"
            @click="dialogVisible = true"
            >添加</el-button
          >
          <el-dropdown size="small" split-button>
            显示条数
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>显示2条</el-dropdown-item>
              <el-dropdown-item>显示4条</el-dropdown-item>
              <el-dropdown-item>显示6条</el-dropdown-item>
              <el-dropdown-item>显示8条</el-dropdown-item>
              <el-dropdown-item>显示10条</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown size="small" split-button>
            排序方式
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>按添加时间排序</el-dropdown-item>
              <el-dropdown-item>按管理阶级排序</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
      </div>
      <!-- 添加弹框 -->
      <el-dialog title="添加部门" :visible.sync="dialogVisible" width="30%">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="角色名称" prop="jueSeMingChen">
            <el-input
              type="password"
              v-model="ruleForm.jueSeMingChen"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="职能描述" prop="zhiNengMiaoShu">
            <el-input
              type="textarea"
              v-model="ruleForm.zhiNengMiaoShu"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- Table表单 -->
      <template>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            prop="jueSeMingChen"
            label="角色名称"
            width="160"
            height="10"
          ></el-table-column>
          <el-table-column
            prop="zhiNengMiaoShu"
            label="职能描述"
            width="363"
          ></el-table-column>
          <el-table-column
            prop="tianJiaShiJian"
            label="添加时间"
            width="160"
          ></el-table-column>
          <el-table-column label="是否启用" width="80">
            <template slot>
              <el-switch
                v-model="value"
                active-color="#1abc9c"
                inactive-color="#ff4949"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="170">
            <template slot>
              <el-button
                type="text"
                style="color: #1abc9c"
                @click="$router.push('/home/privilege')"
                >权限设置</el-button
              >
              <el-button
                type="text"
                style="color: #1abc9c"
                @click="dialogVisible = true"
                >编辑</el-button
              >
              <el-button type="text" style="color: #1abc9c">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <div class="el-pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :current-page.sync="currentPage"
          :page-size="100"
          layout="total, prev, pager, next, jumper"
          :total="1000"
        ></el-pagination>
      </div>
      <!-- 页面下层数据 -->
      <div class="bottom">
        <div>Copyright © www.AxureUX.com, All Rights Reserved.</div>
        <div>Email: 5698401@qq.com QQ:5698401</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "WorkspaceJsonJueseguanli",

  data() {
    return {
      // 是否启用状态
      value: true,
      currentPage: 0,
      // 弹出框状态
      dialogVisible: false,
      // Form表单数据
      ruleForm: {
        jueSeMingChen: "",
        zhiNengMiaoShu: "",
      },
      // Table表单数据
      tableData: [
        {
          jueSeMingChen: "管理员",
          zhiNengMiaoShu: "暂无描述",
          tianJiaShiJian: "2017-08-05 15:47:44",
        },
        {
          jueSeMingChen: "销售员",
          zhiNengMiaoShu: "暂无描述",
          tianJiaShiJian: "2017-08-05 15:47:44",
        },
        {
          jueSeMingChen: "销售员",
          zhiNengMiaoShu: "暂无描述",
          tianJiaShiJian: "2017-08-05 15:47:44",
        },
        {
          jueSeMingChen: "销售员",
          zhiNengMiaoShu: "暂无描述",
          tianJiaShiJian: "2017-08-05 15:47:44",
        },
        {
          jueSeMingChen: "销售员",
          zhiNengMiaoShu: "暂无描述",
          tianJiaShiJian: "2017-08-05 15:47:44",
        },
        {
          jueSeMingChen: "销售员",
          zhiNengMiaoShu: "暂无描述",
          tianJiaShiJian: "2017-08-05 15:47:44",
        },
        {
          jueSeMingChen: "销售员",
          zhiNengMiaoShu: "暂无描述",
          tianJiaShiJian: "2017-08-05 15:47:44",
        },
        {
          jueSeMingChen: "销售员",
          zhiNengMiaoShu: "暂无描述",
          tianJiaShiJian: "2017-08-05 15:47:44",
        },
      ],
      // 校验
      rules: {
        jueSeMingChen: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        zhiNengMiaoShu: [
          { required: true, message: "请输入内容", trigger: "blur" },
        ],
      },
    };
  },

  mounted() {},

  methods: {
    // 分页
    handleSizeChange() {},
    handleCurrentChange() {},
    Router() {
      this.$router.go(0);
    },
  },
};
</script>

<style lang="less" scoped>
.shang {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: rgb(245, 245, 245);

  .zi {
    height: 17px;
    line-height: 17px;
    border-left: 5px solid rgb(50, 172, 86);
    padding: 4px;
  }
}

.shang_box {
  width: 85%;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btns {
  height: 40px;
  display: flex;
}

.box {
  width: 85%;
  height: 45px;
  line-height: 43px;
  border: 1px solid rgb(228, 228, 228);
  margin: auto;
  margin-top: 15px;
  background-color: rgb(245, 245, 245);
}

.clearfix {
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: space-between;
}

::v-deep {
  .el-pagination.is-background .el-pager li:not(.disabled) {
    background-color: #fff; // 未选中背景和字体
    // color: #fff;
  }

  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #1abc9c; // 选中项背景和字体
    color: #fff;
  }
}

.el-pagination {
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: flex-end;
}

.bottom {
  width: 100%;
  height: 100px;
  font-size: 14px;
  color: rgb(218, 218, 218);
  text-align: center;
}

.el-dialog__header {
  background-color: rgb(223, 223, 223);
}

::v-deep .el-table .el-table__cell {
  // padding: 0;
  text-align: center;
}
</style>